<template>
  <div class="home" ref="AICore">
    <el-container>
      <el-main>
        <el-row style="margin-bottom: 12px;text-align: right; position: absolute; top: 25px; right: 30px; z-index: 1;">
          <el-col>
            <el-button @click="syncData" icon="el-icon-refresh" type="primary" size="small" >同步Ones数据</el-button>
          </el-col>
        </el-row>
        <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabsClick">
          <el-tab-pane name="first">
            <span slot="label" style="font-size: 16px;"><i class="el-icon-data-analysis"></i>月度客诉率分布图</span>
              <feedback-figure1 ref="plot1" />
          </el-tab-pane>
          <el-tab-pane name="second">
            <span slot="label"><i class="el-icon-data-line"></i>版本客诉分布图</span>
              <feedback-figure2 ref="plot2" />
          </el-tab-pane>
          <el-tab-pane name="third">
            <span slot="label"><i class="el-icon-data-line"></i>术者客诉分布图</span>
              <feedback-figure3 ref="plot3" />
          </el-tab-pane>
          <el-tab-pane name="fourth">
            <span slot="label"><i class="el-icon-data-line"></i>责任部门客诉分布图</span>
              <feedback-figure4 ref="plot4" />
          </el-tab-pane>
          <el-tab-pane name="fifth">
            <span slot="label"><i class="el-icon-data-line"></i>产品组成客诉分布图</span>
              <feedback-figure5 ref="plot5" />
          </el-tab-pane>
          <el-tab-pane name="sixth">
            <span slot="label"><i class="el-icon-data-line"></i>医院科室客诉分布图</span>
              <feedback-figure6 ref="plot6" />
          </el-tab-pane>
          <el-tab-pane name="seventh">
            <span slot="label"><i class="el-icon-data-line"></i>二级使用场景客诉分布图</span>
              <feedback-figure7 ref="plot7" />
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import feedbackFigure1 from './components/plot1.vue'
import feedbackFigure2 from './components/plot2.vue'
import feedbackFigure3 from './components/plot3.vue'
import feedbackFigure4 from './components/plot4.vue'
import feedbackFigure5 from './components/plot5.vue'
import feedbackFigure6 from './components/plot6.vue'
import feedbackFigure7 from './components/plot7.vue'

import axios from 'axios'

axios.defaults.baseURL = '/api'
export default {
  data() {
    return {
      data: {},
      fullscreenLoading: false,
      activeTab: "first"
    }
  },
  components: {
    feedbackFigure1,
    feedbackFigure2,
    feedbackFigure3,
    feedbackFigure4,
    feedbackFigure5,
    feedbackFigure6,
    feedbackFigure7
  },
  methods: {
    handleTabsClick(tab){
      tab.$children[0].initPlot();
    },
    // 处理标定结果上传服务器
    submitUpload(form) {
      if (form.file_list.length > 0) {
        axios.post('/calibration/result/bind/', form).then(
            response => {
              this.uploadVisible = false;
              this.searchTableData();
              this.$message({
                message: response.data.message,
                type: 'success',
                showClose: true
              });
            },
            // 失败
            error => {
              this.$message.error({message: error.response.data.message, showClose: true});
            });
      } else {
        this.$message({message: "未上传文件", showClose: true, type: 'warning'});
      }
    },
    syncData() {
      const loading = this.$loading({
        lock: true,
        text: '数据同步中，请稍等~~',
        // icon: require('@/assets/images/model/hebao.gif'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.post('/feedback/sync/data/').then(
          response => {
            this.$message({
              message: '数据同步成功！',
              type: 'success'
            });
            loading.close();
            console.log(response.data.message);
            this.searchTableData();
          },
          // 失败
          error => {
            this.$message.error({message: error.response.data.message, showClose: true});
            loading.close();
          })
    },
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  //line-height: 160px;
}

</style>